<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章新增</title>
    <#include "/header.html">
    <script type="text/javascript" src="${request.contextPath}/statics/plugins/kindeditor/kindeditor-all.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/plugins/kindeditor/lang/zh-CN.js"></script>
    <script src="${request.contextPath}/statics/js/modules/sys/bese64.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
    .labelContent{
position: relative;
    }
    .labelItems{
        position: absolute;
        top: 10px;
        left: 12px;
    }
    .content-scrol{
        overflow: hidden;
        width: 368px;
        background: rgba(0, 0, 0, 0.5);
        height: 667px;
        position: absolute;
        top: 50%;
        left: 12px;
        margin-top: -333px;
        padding: 15px;
    }
    .content {
        background: rgba(0, 0, 0, 0.5);
        width: 375px;
        height: 667px;
        position: absolute;
        top: 50%;
        left: 5px;
        /*margin-left: -187px;*/
        margin-top: -333px;
        padding: 15px;
        overflow-x: hidden;
        overflow-y: auto;

    }

    .content-title {
        border: 1px solid white;
        border-radius: 5px;
        width: 100%;
        /* height: 100px; */
        position: relative;
        background-color: white;

    }

    .ct-textarea {
        width: calc(100% - 20px);
        padding-top: 30px;
        margin-bottom: 50px;
        padding-left: 10px;
        padding-right: 10px;
        outline:none;
    }

    .ct-but {
        background: #f30;
        color: #fff;
        width: 70px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        position: absolute;
        bottom: 10px;
        left: 120px;

    }

    .null15 {
        width: 100%;
        height: 15px;
    }

    .content-img {
        border: 1px solid white;
        border-radius: 5px;
        width: 100%;
        height: 200px;
        position: relative;
        background-color: white;
    }

    .ci-img {
        width: 140px;
        height: 130px;
        position: absolute;
        top: 10px;
        left: 50%;
        margin-left: -70px;
        border-radius: 5px;
    }

    .ci-del {
        background: #f30;
        color: #fff;
        width: 70px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        position: absolute;
        bottom: 10px;
        left: 120px;
    }

    .content-p {
        border: 1px solid white;
        border-radius: 5px;
        width: 100%;
        /* height: 100px; */
        position: relative;
        background-color: white;
    }

    .cp-textarea {
        width: calc(100% - 20px);
        padding-top: 30px;
        margin-bottom: 50px;
        padding-left: 10px;
        padding-right: 10px;

    }

    .cp-but {
        background: #f30;
        color: #fff;
        width: 70px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        position: absolute;
        bottom: 10px;
        left: 120px;
    }

    .content-video {
        border: 1px solid white;
        border-radius: 5px;
        width: 100%;
        height: 300px;
        position: relative;
        background-color: white;
    }

    .cv-video {
        position: absolute;
        left: 50%;
        margin-left: -150px;
        top: 10px;
        border-radius: 5px;
        width: 300px;
        height: 240px;
    }

    .cv-video video {
        width: 100%;
        height: 100%;
    }

    .cv-video iframe {
        width: 100%;
        height: 100%;
    }

    .cv-but {
        background: #f30;
        color: #fff;
        width: 70px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;

        position: absolute;
        bottom: 10px;
        left: 120px;
    }

    .cv-video-none {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 50px;
        right: 0px;
        background: white;
        opacity: 0.5;
    }

    .none {
        display: none !important;
    }

    .content-save {
        color: white;
        text-align: center;
        font-size: 16px;
        position: fixed;
        bottom: 73px;
        width: 360px;
        left: 11px;
        height: 40px;
        line-height: 40px;
        background: #39ab67;
        cursor: pointer;
    }
</style>
<body>
<div id="rrapp">
    <div class="form-group col-sm-3">
        <input type="text" class="form-control" id="text" placeholder="文章链接"/>
    </div>
    <a class="btn btn-default" onclick="commit()">查询</a>
</div>
<div class="labelContent">
<div class="labelItems">
    <label><input name="Fruit" type="radio" value="10" />保险咨询</label>
    <label><input name="Fruit" type="radio" value="11" />保单获客</label>
    <label><input name="Fruit" type="radio" value="12" />保险理念</label>
    <label><input name="Fruit" type="radio" value="13" />保险签单</label>
</div>
</div>
<div>
    <#include "barticlebutton.html">
</div>
</body>
</html>
<script>
    function delText(id) {
        var dom=$('#text'+id);
        //console.log(dom.children().eq());
        if (dom.attr('data-text') == '删除段落') {
            dom.css('background', '#39ab67');
            dom.parent().css('color', '#cccccc');

            dom.children().eq(0).text('还原段落');
            dom.attr('data-text','还原段落');
            dom.children().eq(2).text('');
        } else {
            dom.css('background', '#f30');
            dom.parent().css('color', 'black');

            dom.children().eq(0).text('删除段落');
            dom.attr('data-text','删除段落');
            var text = dom.children().eq(1).text();
            dom.children().eq(2).text(text);
        }
    }
    function delImg(id) {
        var dom=$('#img'+id);
        //console.log(dom.children());
        if (dom.attr('data-text') == '删除图片') {
            dom.css('background', '#39ab67');
            dom.siblings().eq(0).attr('src',
                'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3231897502,2872604692&fm=58&bpow=400&bpoh=256'
            );

            dom.children().eq(0).text('还原图片');
            dom.attr('data-text','还原图片');
            dom.children().eq(2).text('');

        } else {
            dom.css('background', '#f30');
            var text1 = dom.children().eq(1).text();
            dom.siblings().eq(0).attr('src', JSON.parse(text1).textContent);

            dom.children().eq(0).text('删除图片');
            dom.attr('data-text','删除图片');
            var text = dom.children().eq(1).text();
            dom.children().eq(2).text(text);

        }
    }
    function delVideo(id) {
        var dom=$('#video'+id);
        var text = dom.attr('data-text');
        if (dom.attr('data-text') == '删除视频') {
            dom.css('background', '#39ab67');
            dom.parent().append(' <div class="cv-video-none"></div>');

            dom.children().eq(0).text('还原视频');
            dom.attr('data-text','还原视频');
            dom.children().eq(2).text('');

        } else {
            dom.css('background', '#f30');
            $(".cv-video-none").remove();

            dom.children().eq(0).text('删除视频');
            dom.attr('data-text','删除视频');
            var text = dom.children().eq(1).text();
            dom.children().eq(2).text(text);

        }
    }
    // function commit() {
    //     var wxArticleUrl = $("#text").val();
    //     var reg = RegExp("https://mp.weixin.qq.com");
    //     if (!reg.test(wxArticleUrl)) {
    //         alert("请输入微信原生链接");
    //         return;
    //     }
    //     $.ajax({
    //         type: "POST",
    //         contentType: "application/json;charset=UTF-8",
    //         url: baseURL + "sys/barticleinfo/commit",
    //         data: JSON.stringify(wxArticleUrl),
    //         dataType: "JSON",
    //         async:false,
    //         success: function (r) {
    //             if (r.code == 0) {
    //                 vm.bArticleInfo = r.content;
    //                 vm.bArticleInfo.article_content = r.family;
    //                 var a =r.family;
    //                 //console.log(r.family)
    //                 var obj = {
    //                     "data": {
    //                         "articleTitle": vm.bArticleInfo.article_title,
    //                         "articleInfo": a
    //                     }
    //                 };
    //                 domShow(obj);
    //
    //             } else {
    //                 alert("请求失败");
    //             }
    //         }
    //     });
    // }
        //修改标题
        $('.ct-but').on('click', function () {
            if ($('.ct-textarea').attr("contenteditable") == 'false') {
                $(this).css('background', '#39ab67');
                $('.ct-textarea').attr("contenteditable", 'true');
            } else {
                $(this).css('background', '#f30');
                $('.ct-textarea').attr("contenteditable", 'false');
            }
        });
        //保存
        $('.content-save').on('click', function () {
            var arr = [];
            $('.obj').each(function () {
                //console.log($(this).text());
                if ($(this).text()) {
                    var obj =JSON.parse($(this).text());
                    arr.push(obj);
                }


            });
            vm.bArticleInfo.articleContent=JSON.stringify(arr);
            vm.bArticleInfo.articleTitle=$('.ct-textarea').text();
            vm.bArticleInfo.articleDesc=vm.bArticleInfo.article_desc;
            vm.bArticleInfo.articleImgUrl=vm.bArticleInfo.article_img_url;
            vm.bArticleInfo.articleTypeId=$('input[name="Fruit"]:checked').val();
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                url: baseURL + "sys/barticleinfo/save",
                data:JSON.stringify(vm.bArticleInfo),
                dataType: "JSON",
                success: function (r) {
                    if(r.total==0 && r.code==0){
                        alert("新增成功")
                    }else if(r.total>0){
                        alert("该文章已存在，请重新添加");
                    }
                }
            })
            //console.log(arr);
        });

    var vm = new Vue({
        el:'#rrapp',
        data:{
            q:{
                articleTypeName:null,
                articleTitle:null,
            },
            bArticleInfo : {
                article_content:[],
                article_desc:null,
                article_img_url:null
            },
        },
        methods: {

            commit: function () {
                var wxArticleUrl = $("#text").val();
                var reg = RegExp("https://mp.weixin.qq.com");
                if (!reg.test(wxArticleUrl)) {
                    alert("请输入微信原生链接");
                    return;
                }
                $.ajax({
                    type: "POST",
                    contentType: "application/json;charset=UTF-8",
                    url: baseURL + "sys/barticleinfo/commit",
                    data: JSON.stringify(wxArticleUrl),
                    dataType: "JSON",
                    async:false,
                    success: function (r) {
                        if (r.code == 0) {
                            vm.bArticleInfo = r.content;
                            vm.bArticleInfo.article_content = r.family;
                            //alert(r.family)
                            var obj = {
                                "data": {
                                    "articleTitle": vm.bArticleInfo.article_title,
                                    "articleInfo": r.family
                                }
                            };
                            domShow(obj);

                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
        },
        mounted:function () {
            //修改标题

        }
    });
    $(document).ready(function(){



    });

</script>
